<template>
  <div>
    <div class="explain_box">
      <div class="explain_header">积分说明</div>
      <div class="explain_list">
        <img src="../../../../assets/img/my/ic_purpose.png" alt="" />
        <div>
          <div class="list_text_top" style="color: #ff5543">积分的用途：</div>
          <div class="list_text_down">可兑换各种游戏优惠券</div>
        </div>
      </div>
      <div class="explain_list">
        <img src="../../../../assets/img/my/ic_obtain.png" alt="" />
        <div>
          <div class="list_text_top" style="color: #439aff">获取积分方法：</div>
          <div class="list_text_down">发表优质游戏点评，参与游戏问答</div>
        </div>
      </div>
      <van-button color="#FF5543" round class="explain_btn" @click="explainClick">我知道了</van-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    explainClick() {
      this.$emit('explain-click')
    }
  },
};
</script>

<style lang="less" scoped>
.explain_box {
  width: 8.133333rem;
  height: 7.36rem;
  background: #fff;
  overflow: hidden;
}

.explain_header {
  font-size: .506667rem;
  font-weight: bold;
  color: #222222;
  line-height: 1.546667rem;
  text-align: center;
}

.explain_list {
  box-sizing: border-box;
  width: 7.333333rem;
  height: 1.813333rem;
  background: #F8F8F8;
  border-radius: .266667rem;
  margin: 0 .4rem .133333rem;
  padding: .32rem .266667rem;
  display: flex;
  align-items: center;
  img {
    width: 1.173333rem;
    height: 1.173333rem;
    margin-right: .266667rem;
  }
  .list_text_top {
    font-size: .373333rem;
    font-weight: 800;
    line-height: .666667rem;
  }
  .list_text_down {
    font-size: .346667rem;
    font-weight: 500;
    color: #333333;
    line-height: .666667rem;
  }
}

.explain_btn {
  width: 3.466667rem;
  height: .986667rem;
  font-size: .346667rem;
  font-weight: 500;
  margin: .533333rem 2.333333rem;
}
</style>